<template>
  <div class="footer">
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home" to="/">主页</van-tabbar-item>
      <van-tabbar-item icon="chat" dot to="/shop">商品</van-tabbar-item>
      <van-tabbar-item icon="records" info="5" to="/shopCart">购物车</van-tabbar-item>
      <van-tabbar-item icon="gold-coin" info="20" to="/my">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// import Vue from 'vue'
// import { Tabbar, TabbarItem } from 'vant'
// import { saveActiveId, loadActiveId } from '../../common/js/cache'
// import { mapMutations } from 'vuex'
// Vue.use(Tabbar).use(TabbarItem)
export default {
  data() {
    return {
      active: 0
    }
  },
  computed: {
    // ...mapState(['active']),
    currentRouterPath() {
      return this.$route.path
    }
  },
  mounted() {
  },
  methods: {
    // ...mapMutations({
    //   setActive: 'SET_ACTIVE'
    // }),
    // saveActive() {
    //   this.setActive(this.active)
    // }
  },
  watch: {
    currentRouterPath(newRouterPath) {
      console.log(newRouterPath)
      switch (newRouterPath) {
        case '/':
          this.active = 0
          break
        case '/shop':
          this.active = 1
          break
        case '/shopCart':
          this.active = 2
          break
        case '/my':
          this.active = 3
          break
        default:
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.footer {
  // height: 1rem;
  .van-tabbar {
    // height: 1rem;
  }
  .van-tabbar-item {
    // font-size: 0.33rem;
    .van-tabbar-item--active {
      .van-icon:before {
        // font-size: 0.33rem;
      }
    }
  }
}
</style>
